<template>
  <div>
    <!-- 顶部导航位 -->
    <div class="Comfirm_title">
      <van-nav-bar
        title="确认订单"
        left-text="返回"
        left-arrow
        @click-left="goShopbag"
      />
    </div>

    <!-- 顶部一下的大盒子 -->
    <div class="Order_box">
      <!-- 选择地址个人信息盒子 -->
      <div class="select_address">
        <!-- 选择地址 -->
        <div class="select_full_address" @click="goSelectAddress">
          选择地址 &gt;
        </div>
        <!--   名字     手机号    是否为默认   的盒子 -->
        <div class="select_Personal_information">
          <!-- 名字 -->
          <div class="Personal_name">{{ isDefaultAddress.name }}</div>
          <!-- 手机号 -->
          <div class="Personal_phone">{{ isDefaultAddress.tel }}</div>
          <!-- 是否为默认 -->
          <div class="default">
            {{ isDefaultAddress.isDefault === 1 ? "默认" : "" }}
          </div>
        </div>
        <!-- 地址显示 -->
        <div class="full_address">{{ isDefaultAddress.fullAddress }}</div>
      </div>

      <!-- 商品信息列表盒子 -->
      <div class="OrderList_info">
        <span>订单信息</span>
        <!-- 每条订单信息 -->
        <div class="OrderList_info_item">
          <div v-for="(item, index) in orderInfo" :key="index">
            <ProList :proData="item" :isHasCheckbox="false">
              <div>x{{ item.count }}</div>
            </ProList>
          </div>
        </div>
      </div>
      <!-- 分割虚线 -->
      <div class="Segmentation"></div>

      <!-- 订单总金额  时间  总件数 -->
      <div class="Order_total">
        <!-- <div class="Order_time total_num">1999-99-99 00:44:55</div> -->
        <div class="Order_num_toal">
          <div class="total_num">共计{{ counts }}件</div>
          <div class="total">合计 &yen; {{ total }}</div>
        </div>
      </div>

      <!-- 提交按钮 -->
      <div class="Order_btn">
        <van-button @click="SecondConfirmation" type="primary" block
          >立即结算</van-button
        >
      </div>

      <!-- 弹出层 用于包裹密码盘-->
      <van-popup v-model="show" position="bottom" :style="{ height: '50%' }">
        <!-- 密码输入框 -->
        <van-password-input
          :value="passwork"
          :info="info"
          :error-info="errorInfo"
          :focused="showKeyboard"
          @focus="showKeyboard = true"
        />
        <!-- 数字键盘 -->
        <van-number-keyboard
          v-model="passwork"
          :show="showKeyboard"
          :maxlength="maxlength"
          @blur="showKeyboard = false"
        />
      </van-popup>
    </div>
  </div>
</template>

<script>
// 导入当个商品列表组件
import ProList from "../components/ProList.vue";
export default {
  name: "ConfirmOrder",
  data() {
    return {
      // 接收从shopbag购物车页传进来的sids
      sids: "",

      // 每条订单商品信息的数据  用于循环订单信息列表
      orderInfo: [],

      // 订单件数的总量
      counts: 0,

      // 订单的总金额
      total: 0,

      // 通过调用查询接口得到默认地址
      isDefaultAddress: {},

      // 定义aid 接收选择地址传过来的aid 通过aid找到确认订单需要的地址
      aid: "",

      // 以下是密码盘的数据
      // 弹出层 ,弹出密码盘 输入支付密码
      show: false,
      // 密码
      passwork : "",
      maxlength : 6,
      // 我自己设置的支付密码
      Mypasswork:"123456",
      // 输入框下方文字提示
      info:"密码为 6 位数字",
      errorInfo:"",
      // 控制密码键盘显示隐藏 跟 焦点
      showKeyboard:""
    };
  },
  // 钩子函数created 在生命周期的第二阶段 完成页面渲染阶段
  created() {
    // 将从shopbag通过路由传过来时值 this.$route.query  赋值给this.sids
    this.sids = this.$route.query.sids;

    // 调用提交订单页面查询需要购买商品接口
    this.commitShopcart();

    // 接收选择地址传过来的aid 通过aid找到确认订单需要的地址
    this.aid = this.$route.query.aid;

    // 最终确认地址的方法, 通过判断是aid是否有值
    this.lastConfirmAddress();
  },
  // vue的侦听器
  watch: {
    // 侦听密码是否符合条件
    passwork(passwork) {
      if (passwork.length === this.maxlength && passwork === this.Mypasswork) {
          this.ConfirmationPay()
          this.errorInfo = ""
      } else if(passwork.length === this.maxlength && passwork !== this.Mypasswork){
        this.errorInfo = "密码错误"
      }
    },
  },

  methods: {
    // 跳转到购物车页面的方法
    goShopbag() {
      this.$router.push({ name: "Shopbag" });
    },

    // 点击选择地址, 跳转到选择地址页面的方法
    goSelectAddress() {
      this.$router.push({ name: "SelectAddress", query: { sids: this.sids } });
    },

    // 编写 提交订单页面查询需要购买商品接口的方法  在钩子函数created调用
    commitShopcart() {
      // 获取token token的登录时获取的 并且存在cookie中
      // let tokenString = this.$cookies.get("TOKEN");
       let tokenString =  localStorage.getItem("TOKEN");

      // 处理接口需要传入的参数格式  :  其中 sids 值为 JSON.stringify([sid1, sid2, sid3])
      // 
      let sids = JSON.stringify([...this.sids.split("-")]);
      // 
      // 调用axios
      this.axios({
        method: "get",
        url: "/commitShopcart",
        params: {
          tokenString,
          sids,
        },
      })
        .then((res) => {
          // 
          // 判断是否获取数据成功
          if (res.data.code === 50000) {
            // 遍历获取数据结果的数据

            res.data.result.forEach((v) => {
              // 将遍历的每条数据推到data函数里面的orderInfo数组里面
              this.orderInfo.push(v);

              // 遍历 res.data.result 得到商品件数的总和
              this.counts += v.count;

              // 遍历 res.data.result 得到商品的总金额
              this.total += v.count * v.price;
            });
          }
        })
        .catch((err) => {
          
        });
    },

    // 查询地址接口方法  用户遍历是否有默认地址 并将默认地址渲染到页面上 在created调用
    findAddress() {
      // let tokenString = this.$cookies.get("TOKEN");
       let tokenString =  localStorage.getItem("TOKEN");

      // 调用axios获取接口数据
      this.axios({
        // 请求接口方法
        method: "get",
        // 接口的请求地址
        url: "/findAddress",
        // 请求接口的参数  使用get请求方式需要使用params发送
        params: {
          tokenString,
        },
      })
        .then((res) => {
          // 
          // 判断是否获取成功
          if (res.data.code === 20000) {
            // // 遍历获取成功的结果数据,
            res.data.result.forEach((v) => {
              // 判断v.isDafault的值为1的数据 并将V赋值给data函数里面的isDefaultAddress
              // 
              if (v.isDefault === 1) {
                // 
                this.isDefaultAddress = v;
                this.isDefaultAddress.fullAddress = `${v.province}${v.city}${v.county}${v.addressDetail}`;
              }
            });
          }
        })
        .catch((err) => {
          
        });
    },

    // 选择地址方法
    selecAddress() {
      // let tokenString = this.$cookies.get("TOKEN");
       let tokenString =  localStorage.getItem("TOKEN");

      this.axios({
        method: "get",
        url: "/findAddressByAid",
        params: {
          tokenString,
          aid: this.aid,
        },
      })
        .then((res) => {
          // 
          if (res.data.code === 40000) {
            this.isDefaultAddress = res.data.result[0];
            this.isDefaultAddress.fullAddress = `${res.data.result[0].province}${res.data.result[0].city}${res.data.result[0].county}${res.data.result[0].addressDetail}`;
          }
        })
        .catch((err) => {
          
        });
    },

    //最终确认地址方法 , 将findAddress()方法和selecAddress方法写入进行判断需要用哪一个
    lastConfirmAddress() {
      if (this.aid) {
        this.selecAddress();
      } else {
        this.findAddress();
      }
    },

    // 点击立即结算 进行订单地址确认 和 二次确认
    SecondConfirmation() {
      if (!this.isDefaultAddress.aid) {
        this.$toast("请添加地址");
        return;
      }
      this.$dialog
        .confirm({
          title: "确认订单",
          message: "是否确认提交 ? ",
        })
        .then(() => {
          // 控制弹出层
          this.show = true;
        })
        .catch((err) => {
          // on cancel
          
        });
    },

    // 支付密码支付完成
    ConfirmationPay(){
      
      // 将输入的密码清空, 防止下次输入密码时, 原本的密码还在
      this.passwork = ''
      // 把弹出层隐藏
      this.show = false
      // 获取token
      // let tokenString = this.$cookies.get("TOKEN")
       let tokenString =  localStorage.getItem("TOKEN");

      // 将从购物车传过来的sids处理成JSON.stringify([sid1, sid2, sid3])的格式
      let sids = JSON.stringify(...[this.sids.split("-")])
      //  打印this.isDefaultAddress 查看数据
      

      // 调用立即结算的接口
      this.axios({
        method:"post",
        url:"/pay",
        data:{
          tokenString,
          sids,
          phone:this.isDefaultAddress.title,
          address:this.isDefaultAddress.fullAddress,
          receiver:this.isDefaultAddress.name
        }
      }).then(res =>{
        this.$toast(res.data.msg)
        if(res.data.code === 60000){
            this.$router.push({name:"MyOrder", query:{bb:2}})
        }
      }).catch(err =>{
        
      })
    }
  },
  // 此处注册组件
  components: {
    ProList,
  },
};
</script>

<style lang="less" scoped>
// Order_box包裹顶部以下的盒子
.Comfirm_title {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 10000;
}
.Order_box {
  margin-top: 50px;
  padding: 10px;
  padding-bottom: 60px;
  background-color: #dfdfdf;
  // 是个人信息的盒子
  .select_address {
    background: #fff;
    border-radius: 5px 5px 0 0;
    padding: 5px;
    box-sizing: border-box;

    // 选择地址
    .select_full_address {
      margin-bottom: 10px;
      color: #555;
    }

    // 名字  电话 是否默认选择盒子
    .select_Personal_information {
      display: flex;
      //  做成弹性盒子 让盒子并排 并且给定间距
      align-items: center;
      div {
        margin-right: 20px;
        &:last-child {
          margin-right: 0;
        }
      }

      // 名字
      .Personal_name {
        // font-size: 14px;
        font-weight: bold;
        color: blue;
      }

      // 默认选择盒子
      .default {
        box-sizing: border-box;
        padding: 0px 5px;
        background-color: blue;
        border-radius: 10px;
        color: #fff;
      }
    }

    // 个人信息地址显示
    .full_address {
      margin-top: 10px;
      color: #555;
    }
  }

  // 商品信息盒子
  .OrderList_info {
    margin-top: 10px;
    background-color: #fff;
    box-sizing: border-box;
    // padding-bottom: 60px;
    padding-bottom: 50px;
    .OrderList_info_item {
      overflow-y: auto;
    }
    span {
      display: inline-block;
      margin: 5px 0 0 5px;
    }
  }

  // 分割虚线
  .Segmentation {
    width: 100%;
    border-top: 1px dashed #333;
    position: relative;
    &::after {
      content: " ";
      display: block;
      position: absolute;
      left: -10px;
      top: -10px;
      width: 20px;
      height: 20px;
      border-radius: 50px;
      background-color: #dfdfdf;
    }
    &::before {
      content: " ";
      display: block;
      position: absolute;
      right: -10px;
      top: -10px;
      width: 20px;
      height: 20px;
      border-radius: 50px;
      background-color: #dfdfdf;
    }
  }

  //  <!-- 订单总金额  时间  总件数 -->
  .Order_total {
    padding: 5px;
    background-color: #fff;
  }
  .Order_time {
    margin-top: 5px;
  }
  .Order_num_toal {
    display: flex;
    justify-content: space-between;
  }
  .Order_num_toal {
    margin-top: 10px;
  }
  .total {
    // font-weight: bold;
    color: blue;
    font-size: 14px;
  }
  .total_num {
    color: #555;
  }

  // 立即计算按钮
  /deep/.van-button--block {
    position: fixed;
    bottom: 10px;
    left: 0;
    right: 0;
    display: block;
    width: 90%;
    margin: auto;
    border-radius: 50px;
    background: blue;
  }
}
</style>